<template>
  
  <div id="echartsMap">
    <table style="height:100%;width:100%;">
      <tr>
      <td style="width:75%;" rowspan="2">
        <div id="echartsChina1">
           <div id="echartsChina"  @click="redirectToIndustryList"></div>
          </div>
      </td>
      <td>
        <div id="decContent">
            <h2 style="margin-left:10px;">数据全景</h2>
            <ul class="login-info-list" style="margin-left:10px;">
              <li class="login-info-item" v-for="(item,index) in listDec" :key="index">
                {{item}}
              </li>
            </ul>
        </div>
      </td>
        </tr>
        <tr>
          <td>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="实时表" name="first">
                <div id="echartsRigthBottom"></div>
              </el-tab-pane>
              <el-tab-pane label="日表" name="second">
                <div id="echartsRigthTop"></div>
              </el-tab-pane>
            </el-tabs>
            <!-- <div id="echartsRigthBottom"></div> -->
          </td>
          </tr>
    </table>
  </div>
</template>

<script>
import "../../../assets/js/requireDetails.js";
import{
  getObj,
} from '@/api/bus/sensor/company'
import{
    getLatestSensorList,
  getSensorDataForPeriodOfTime
} from '@/api/bus/sensor/sensorData'

export default {
  name: 'companyDetail',
  data () {
    return {
      msg: '',
    
      activeName: 'first',
      listDec:[],
      ueTemp:Math.random() * 500+500,
      datas:[], 
      companyId:'',
      oneHourData:[],//一个小时的流量累计
      oneDayData:[],//一天的流量累计
      oneHourChart:{},
      oneDayChart:{},
    }
  },
  created() {
  },
  mounted(){
   
    this.companyId = this.$route.query.companyId;
    this.drawChinaMap();
  },
  methods: {
    //根据ID查询园区描述信息
    getCompanyInfo(){
      getObj(this.companyId).then(response=>{
        this.listDec.push(
          response.data.industryDec,
        )
      })
    },
    drawChinaMap() {
     
      let that = this;
        setTimeout(() => {
          this.drawBottom();
        }, 100); 
      
    },
    redirectToIndustryList(){
        this.$router.push({
          path:'/bus/company/analysis',
          components:'views/bus/company/analysis',
          query:{
                'companyId':this.companyId,
              }
        });
    },
    handleClick(tab, event) {
        setTimeout(() => {
          this.drawTop();
        }, 200);
      },
      drawTop(){
        let that = this;
        this.oneDayChart = that.$echarts.init(document.getElementById('echartsRigthTop'));
        this.oneDayChart.setOption({
            title: {
                text: '园区日流量图'
            },
            // legend:{
            //   data:['压力传感数据','热力传感数据'],
            // },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                  return params =params[0].seriesName+ '\n'+params[0].data.value[0] + '---' +parseInt( params[0].data.value[1])+'\n';
                },
                axisPointer: {
                    animation: false,
                    type:'none',
                },
                extraCssText:'width:220px; white-space:pre-wrap'
            },
            //解决Y轴显示不全的情况
            grid: {
                left: 80
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                

            },
            series: [{
                name: '日流量累计',
                type: 'line',
                itemStyle : {
                  normal : {
                    lineStyle:{
                      color:'red'
                    }
                  }
                },
                showSymbol: false,
                hoverAnimation: false,
                data:[]
            }
            ]
          });
          var vt = this.getNowFormatDate(0,0);
          var vtOneDayBefore = this.getNowFormatDate(0,1);
          //全国当前时点24小时的流量累计
          getSensorDataForPeriodOfTime(this.companyId,"COMPANY",vtOneDayBefore,vt).then(response=>{
              
              this.refreshOneDayLineChartData(response);
          });

      },
      drawBottom(){
        let that = this;
        this.oneHourChart = that.$echarts.init(document.getElementById('echartsRigthBottom'));
        this.oneHourChart.setOption({
            title: {
                text: '园区实时流量图'
            },
            // legend:{
            //   data:['压力传感数据','热力传感数据'],
            // },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {

                  return params =params[0].seriesName+ '\n'+params[0].data.value[0] + '---' +parseInt( params[0].data.value[1])+'\n';
                },
                axisPointer: {
                    animation: false,
                    type:'none',
                },
                extraCssText:'width:220px; white-space:pre-wrap'
            },
            //解决Y轴显示不全的情况
            grid: {
                left: 80
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                

            },
            series: [{
                name: '日实时流量累计',
                type: 'line',
                itemStyle : {
                  normal : {
                    lineStyle:{
                      color:'red'
                    }
                  }
                },
                showSymbol: false,
                hoverAnimation: false,
                data:[]
            }
            ]
          });
          var vt = this.getNowFormatDate(0,0);
          var vtOneHourBefore = this.getNowFormatDate(1,0);
          // 全国当前时点一小时的流量累计
          getSensorDataForPeriodOfTime(this.companyId,"COMPANY",vtOneHourBefore,vt).then(response=>{

              this.refreshLineChartData(response);
          });

           this.getCompanyInfo();
      },
      //刷新当前时点一小时流量图
      refreshLineChartData(responseDatas){
        this.oneHourData=[];
        for (let index = 0; index < responseDatas.data.length; index++) {
            var vt = responseDatas.data[index];
            
            this.oneHourData.push({
                name : vt.timePoint.substring(11),
                value: [vt.timePoint.substring(11),vt.data]
                })
        }
        this.oneHourChart.setOption({
            series:[{
              data : this.oneHourData
            }]
          })
        
      },
      //刷新当前时点24小时流量图
      refreshOneDayLineChartData(responseDatas){
        this.oneDayData=[];
        for (let index = 0; index < responseDatas.data.length; index++) {
            var vt = responseDatas.data[index];
            
            this.oneDayData.push({
                name : vt.timePoint.substring(11),
                value: [vt.timePoint.substring(11),vt.data]
                })
        }
        this.oneDayChart.setOption({
            series:[{
              data : this.oneDayData
            }]
          })
        
      },
      getNowFormatDate(ifOneHour,ifOneDay){
              var timestamp = Date.parse(new Date());
              var subOneHour = ifOneHour*1*60*60*1000;
              var subOneDay = ifOneDay*7*24*60*60*1000;

              timestamp=timestamp-subOneHour-subOneDay;
              var unixtimestamp = new Date(parseInt(timestamp));
              var year = 1900 + unixtimestamp.getYear();
              var month = "0" + (unixtimestamp.getMonth() + 1);
              var date = "0" + (unixtimestamp.getDate()-ifOneDay*1);
              var hour = "0" + (unixtimestamp.getHours()-ifOneHour*1);
              var minute = "0" + unixtimestamp.getMinutes();
              var second = "0" + unixtimestamp.getSeconds();
              return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)
                  + " " + hour.substring(hour.length-2, hour.length) + ":"
                  + minute.substring(minute.length-2, minute.length) + ":"
                  + second.substring(second.length-2, second.length);
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #echartsMap{
    width: 100%;
    height:500px;
    display:block;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}

 #echartsChina1{
    width:98%;
    height:100%;
    float: left;
      border-radius:5px;
      box-sizing: border-box;
      background:#fff;
      overflow: hidden;
  }

#echartsChina{
  width:100%;
  height:100%;
  /*display:block;*/
  float: left;
  background: url('/static/img/department.jpg')
}

#decContent{
  width:100%;
  height:200px;
}


#tdMap{
  width:75%;
  height:500px;
}

#echartsProvince{
  width:80%;
  height:400px;
  display:block;
}

#echartsRigthTop{
  width: 320px;
  height:300px;

}

#echartsRigthBottom{
  width: 100%;
  height:300px;
}
</style>